<template>
	<view>
		<view class="title" @click="back">
			<uni-icons type="back" size="22" style="margin-left: 20rpx;"></uni-icons>
			<text>发帖</text>
		</view>
		<view class="center">
			<input type="text" class="ttitle" placeholder="标题(6-30字之内,必填)" v-model="title">
			<view class="content">
				<view class="text">
					<textarea name="" id="" cols="30" rows="10" placeholder="请输入正文,字数小于1000字"
						v-model="content"></textarea>
					<view>
						<button @click="open" :class="label=='选择板块'?'open':'open1'" v-model="label">{{label}}</button>
						<uni-popup ref="popup" type="center">
							<view class="box">
								<view class="head">选择板块</view>
								<view class="choose">
									<view v-for="(v,i) in choose_label" @click="choose(i)">{{v}}</view>
								</view>
							</view>
						</uni-popup>
					</view>
					<image :src="v" mode="" v-for="v in images"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="">
				<image src="../../static/zhaoxiangji.png" mode="" @click="camera" class="icon"></image>
				<image src="../../static/tupian.png" mode="" @click="album" class="icon"></image>
			</view>
			<view class="fabu" @click="fabu">发布</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data() {
			return {
				choose_label: ['悬赏问答', '爱花展示', '花友换花', '兰花专区', '多肉植物', '月季专区',
					'造园集', '养花日记', '心情树洞', '萌宠家园', '花友生活秀', '投诉建议'
				],
				label: '选择板块',
				images: '',
				title: '',
				content: '',
				userid: '',
				date: new Date().toISOString(), //当前时间
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
		methods: {
			open() {
				this.$refs.popup.open('center')
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			},
			choose(i) {
				this.label = this.choose_label[i];
				this.$refs.popup.close();
			},
			camera() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //使用相机
					success: function(res) {
						this.images.push(res.tempFilePaths);
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			album() {
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.images = res.tempFilePaths[0];
						console.log(this.images);
					}
				});
			},
			fabu() {
				uni.request({
					method: 'POST',
					url: 'http://mnxc.xyz:8080/lunch?id=' + 29,
					data: {
						// userId:53,
						lunchTitle: this.title,
						lunchCont: this.content,
						lunchLabel: this.label,
						imgData: this.images,
						lunchType: 19,
						lunchTime:this.dateFormat(this.date),
					},
					success: (res) => {
						console.log(res.data.data);
						if(res.data.data=='发布帖子成功'){
							uni.showToast({
								title:res.data.data,
								icon:'success'
							})
							this.label= '选择板块';
							this.images= '';
							this.title= '';
							this.content= '';
							
						}else{
							uni.showToast({
								title:'发布失败',
								icon:'error'
							})
						}
						
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			}
		}
	}
</script>

<style>
	.title {
		display: flex;
		align-items: center;
		margin-top: 70rpx;
	}

	.center {
		margin-top: 10rpx;
	}

	.center .ttitle {
		height: 100rpx;
		border-bottom: 1px solid #e1e1e1;
		font-size: 40rpx;
		padding-left: 20rpx;
	}

	.center .content {
		height: 1000rpx;
		border-bottom: 1px solid #e1e1e1;
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.center .content .text {
		margin-top: 20rpx;
		width: 715rpx;
	}

	.center .content .text image {
		width: 715rpx;
	}

	.center .content .open {
		width: 210rpx;
		font-size: 30rpx;
		color: #b3b3b3;
	}

	.center .content .open1 {
		width: 210rpx;
		font-size: 30rpx;
		color: #41c20c;
	}

	.center .content .box {
		background-color: #fff;
		width: 650rpx;
		height: 400rpx;
	}

	.center .content .box .head {
		font-weight: bold;
		font-size: 38rpx;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}

	.center .content .box .choose {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		height: 300rpx;
		margin: 0 30rpx;
	}

	.center .content .box .choose view {
		width: 150rpx;
		text-align: center;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		position: fixed;
		/* position: relative; */
	}

	.bottom .icon {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.bottom .fabu {
		background-color: #41c20c;
		color: #fff;
		width: 100rpx;
		border-radius: 30rpx;
		font-size: 35rpx;
		text-align: center;
		display: inline-block;
		float: right;
		margin-left: 480rpx;
		margin-top: 10rpx;
	}
</style>
